<%--
  Created by IntelliJ IDEA.
  User: 王浩然
  Date: 2022/6/5
  Time: 15:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
    <title>用户表</title>
  </head>
  <body>
<%--  修改页面--%>
  <form class="layui-form" id="updateUsers" style="display: none" lay-filter="updateForm"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-inline">
      <label class="layui-form-label">id</label>
      <div class="layui-input-block" style=" width: 200px">
        <input type="text" name="id" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">姓名</label>
      <div class="layui-input-block" style=" width: 200px">
        <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">电话</label>
      <div class="layui-input-block" style=" width: 200px">
        <input type="text" name="phone" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-input-block">
      <button type="button" class="layui-btn "  lay-submit lay-filter="updateUsers">确认修改</button>
      <button type="button" class="layui-btn layui-btn-danger" lay-filter="remove">清空</button>
    </div>
  </form>
<%--  重置录入框--%>
  <form class="layui-form" id="resetUsers" style="display: none" lay-filter="formTest"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-inline">
      <label class="layui-form-label">id</label>
      <div class="layui-input-block" style=" width: 200px">
        <input type="text" name="userid" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">同户名</label>
      <div class="layui-input-block" style=" width: 200px">
        <input type="text" name="username" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">密码</label>
      <div class="layui-input-block" style=" width: 200px">
        <input type="password" name="usepwd" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-input-block">
      <button type="button" class="layui-btn " lay-filter="resetPassword" lay-submit id="resetPassword">确认重置</button>
      <button type="button" class="layui-btn layui-btn-danger" lay-filter="remove">清空</button>
    </div>
  </form>
<%--//添加录入框--%>
  <form class="layui-form" id="insertStudent" style="display: none"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-inline">
      <label class="layui-form-label">姓名</label>
      <div class="layui-input-block" style=" width: 200px">
        <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">电话</label>
      <div class="layui-input-block" style=" width: 200px">
        <input type="text" name="phone" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">创建时间</label>
      <div class="layui-input-block" style=" width: 200px">
        <input type="text" name="createTime" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-input-block">
      <button type="button" class="layui-btn " lay-filter="insert" lay-submit>确认添加</button>
      <button type="button" class="layui-btn layui-btn-danger" lay-filter="remove">清空</button>
    </div>
  </form>

<%--头部工具栏--%>
    <script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container">
        <button type="button" class="layui-btn" lay-event="add">添加</button>
        <button type="button" class="layui-btn" lay-event="delete">删除</button>
      </div>
    </script>
<%--行内工具栏--%>
    <script type="text/html" id="barDemo">
      <div class="layui-btn-container">
        <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="update">修改</button>
        <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="more">删除</button>
      </div>
    </script>
<%--模糊查询--%>
    <form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
      <div class="layui-inline">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
          <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-inline">
          <input type="text" name="phone" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-inline">
        <div class="layui-input-inline">
          <button class="layui-btn" lay-submit lay-filter="selectUsers">查询</button>
          <button type="reset" class="layui-btn layui-btn-primary" id="remove">重置</button>
        </div>
      </div>
    </form>

    <table id="demo" lay-filter="test"></table>

  <script>
    layui.use(['table','form','jquery','upload'], function(){
      var table = layui.table;
      var form = layui.form;
      var $ = layui.jquery;
      var upload = layui.upload
      //第一个实例
      table.render({
        elem: '#demo'
        ,height: 500
        ,url: '${pageContext.request.contextPath}/tblTester/selectTblTester.do' //数据接口
        ,page: true //开启分页
        ,limit:5
        ,limits:[5,10,15,20]
        ,autoSort:true
        ,toolbar: '#toolbarDemo'
        ,cols: [[ //表头\
          {type: 'checkbox', fixed: 'left'}
          ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
          ,{field: 'name', title: '用户名', width:80}
          ,{field: 'phone', title: '电话', width:150}
          ,{field: 'createTime' , title: '创建时间' , width: 200}
          ,{field: 'testPlanId', title: 'testPlanId', width:150}
          ,{fixed: 'right', title:'操作',  width: 200, align:'center', toolbar: '#barDemo'}
        ]]
      });
      //触发排序事件
      table.on('sort(test)', function(obj){ //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值 "
        console.log(obj.field); //当前排序的字段名
        console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
        console.log(this); //当前排序的 th 对象

        //尽管我们的 table 自带排序功能，但并没有请求服务端。
        //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
        table.reload('demo', {
          initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
          ,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
            field: obj.field //排序字段
            ,order: obj.type //排序方式
          },
        });

        layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
      });
      //模糊查询
      form.on('submit(selectUsers)', function(data){
        console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
        console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
        console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
        table.reload("demo",{
          where:{
            name:data.field.name,
            phone:data.field.phone
          },
          page:{
            curr:1
          }
        })
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
      });

      //监听头工具栏事件
      table.on('toolbar(test)', function(obj) {
        var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
        console.log(data)
        switch (obj.event) {
                //添加一行
          case 'add':
            //弹出对话框填写添加信息
            layer.open({
              title:"添加用户",
              type:1,
              content:$("#insertStudent"),
              area:['500px','500px']
            })
            //监听submit提交
            form.on('submit(insert)', function(data){
              console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
              console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
              console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
              $("#load").click();
              $.ajax({
                url:"/tblTester/insertTblTester.do",
                data:data.field,
                dataType:"json",
                type:"post",
                success:function (a){
                  if (a.code==0){
                    layer.closeAll()
                    table.reload('demo',{
                      page:{
                        curr:1
                      }
                    })
                  }
                  layer.msg(a.msg)
                }
              })
              return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            break;
          case 'delete':
            if(data.length === 0){
              layer.msg('请选择一行');
            } else {
              var id=[]
              for (var i=0;i<data.length;i++){
                id[i]=data[i].id;
              }
              console.log(id.join(","))
              layer.confirm('真的删除么', function(index){
                //确定后进入后台删除数据
                $.ajax({
                  url: "/tblTester/deleteTblTester.do",
                  data:{
                    id:id.join(",")
                  },
                  dataType:"json",
                  type: "post",
                  success:function (a){
                    if (a.code==0){
                      //关闭所有对话框
                      layer.closeAll();
                      table.reload('demo',{
                        page:{
                          curr: 1
                        }
                      })
                    }
                  }
                })
              })
            }
            break;
        }
      })


      //监听行工具事件
      table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
        if(layEvent === 'reset'){
          layer.open({
            title:"重置用户密码",
            type:1,
            content:$("#resetUsers"),
            area:['500px','500px']
          })
          form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
            "userid": data.userid // "name": "value"
            ,"username": data.username
          });
          form.on('submit(resetPassword)', function(data){
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            $.ajax({
              url:"users?method=update",
              data:data.field,
              dataType:"json",
              type:"post",
              success:function (a){
                if (a.code==0){
                  layer.closeAll()
                  table.reload('demo')
                }
                layer.msg(a.msg)
              }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
          });
        } else if(layEvent === 'more'){
          layer.confirm('真的删除行么', function(index){
            console.log(data.userid)
              $.ajax({
                url:"/tblTester/deleteTblTester.do",
                data:{
                  id:data.id
                },
                dataType:"json",
                type:"post",
                success:function (a){
                  if (a.code==0){
                    table.reload('demo')
                  }
                  layer.msg(a.msg)
                }
              })
          })
        }else if (layEvent === 'update'){
          layer.open({
            title:"用户修改",
            type:1,
            content:$("#updateUsers"),
            area:['500px','500px']
          })
          form.val("updateForm", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
            "id": data.id // "name": "value"
            ,"name": data.name
            ,"phone":data.phone
          });
          form.on('submit(updateUsers)', function(data){
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            $.ajax({
              url:"tblTester/updateTblTester.do",
              data:data.field,
              dataType:"json",
              type:"post",
              success:function (a){
                if (a.code==0){
                  layer.closeAll()
                  table.reload('demo')
                }
                layer.msg(a.msg)
              }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
          });
        }
      });
      //重置
      $("#remove").click(function (){
        table.reload("demo",{
          where:{
            name: ""
            ,phone:""
          },
          page:{
            curr:1
          }
        })
      })
    });
  </script>
  </body>
</html>
